<%@ page import="java.util.Date"%>
<%@ page import="com.pochoF1.enums.Equipos"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
<jsp:include page="head.jsp"></jsp:include>
<link rel="stylesheet" href="assets/css/compiled/index.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/css/compiled/gallery.css" type="text/css" media="screen" />
</head>
<body>
	<!-- navbar -->
	<header class="navbar navbar-inverse" role="banner">
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse" id="menu-toggler">
				<span class="sr-only">Open Menu</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="home"> <img src="assets/img/logo.png" alt="logo" />
			</a>
		</div>
	</header>
	<!-- end navbar -->
	<!-- sidebar -->
	<div id="sidebar-nav">
		<ul id="dashboard-menu">
			<li><a href="home"> <i class="icon-home"></i> <span>Home</span></a></li>
			<li class="active">
				<div class="pointer">
					<div class="arrow"></div>
					<div class="arrow_border"></div>
				</div> <a href="showRaces"> <i class="icon-calendar"></i> <span>Race Details</span>
			</a>
			</li>
		</ul>
	</div>
	<!-- end sidebar -->
	<!-- main container -->
	<div class="content">
		<div id="pad-wrapper" class="gallery">
			<c:choose>
				<c:when test="${OKCOMPARE}">
					<div class="row">
						<div class="col-md-12">
							<h4>Drivers Compare</h4>
						</div>
					</div>
					<hr/>
					<div class="container-fluid">
						<c:set var="empezarPagina" value="4"/>
						<c:set var="nroFila" value="0"/>
						<c:set var="cerrarFila" value="1"/>
						<c:set var="cantidadPilotos" value="${fn:length(LISTAPILOTOSFILTRADA)}"/>
						<c:forEach var="piloto" items="${LISTAPILOTOSFILTRADA}">
							<c:if test="${empezarPagina % 4 == 0}">
								<c:set var="cerrarFila" value="1"/>
								<c:set var="nroFila" value="${nroFila + 1}"/>
								<div class="row" id="fila_${nroFila}">
							</c:if>
							<div class="col-md-3">
								<h6>
									${fn:trim(piloto.nombre)}
									<span id="contendor" style="float: right;">
										<a href="#" style="text-decoration: none;" class="btn-select-all-nonPits_${piloto.numero}"  title="Selects all valid laps (No pit entrance/exit)"><i class="icon-ok"></i></a>
									</span>
								</h6>
								<div class="table-responsive" style="max-height: 500px;width:100%;overflow-y:auto">
									<table class="table table-condensed tablaHover" style="border-left: 1px solid #ddd;border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;">
										<thead>
											<tr>
												<th style="text-align: center;font-size: 82%">No.</th>
												<th style="text-align: center;font-size: 82%">Time</th>
												<th style="text-align: center;font-size: 82%">Pits</th>
											</tr>
										</thead>
										<tbody>
											<c:forEach var="vuelta" items="${piloto.vueltasActuales}">
												<c:choose>
													<c:when test="${vuelta.pits or vuelta.vueltaSalida}">
														<tr onclick="seleccionarVuelta(this,'${piloto.numero}','${vuelta.nroVuelta}');">
															<td style="text-align: center;font-size: 96%">${vuelta.nroVuelta}</td>
															<td style="text-align: center;font-size: 96%">${vuelta.tiempoVuelta}</td>
															<td style="text-align: center;font-size: 96%">
																<c:if test="${vuelta.pits}">P</c:if>
															</td>
														</tr>
													</c:when>
													<c:otherwise>
														<tr onclick="seleccionarVuelta(this,'${piloto.numero}','${vuelta.nroVuelta}');" id="TR_${piloto.numero};${vuelta.nroVuelta}">
															<td style="text-align: center;font-size: 96%">${vuelta.nroVuelta}</td>
															<td style="text-align: center;font-size: 96%">${vuelta.tiempoVuelta}</td>
															<td style="text-align: center;font-size: 96%">
																<c:if test="${vuelta.pits}">P</c:if>
															</td>
														</tr>
													</c:otherwise>
												</c:choose>
											</c:forEach>
										</tbody>
									</table>
								</div>
								<c:if test="${cantidadPilotos > 0 }">
									<table style="width:100%;">
										<tr>
											<th style="text-align: center; font-size: 0.8em;"><span id="avg_${piloto.numero}">Average LapTime :</span>&nbsp;<span id="${piloto.numero}">0:00.000</span></th>
										</tr>
									</table>
								</c:if>
								
							</div>
							<c:if test="${cerrarFila % 4 == 0 or empezarPagina-3 == cantidadPilotos}">
								</div>
								</br>
							</c:if>
							<c:set var="empezarPagina" value="${empezarPagina + 1}"/>
							<c:set var="cerrarFila" value="${cerrarFila + 1}"/>
						</c:forEach>
						<hr/>
						<div class="row text-center">
							<div class="col-md-12 col-md-offset-5">
								<span title="Back to previous page" data-rel="tooltip" class="quick-button col-md-1" onclick="history.back();" > 
									<i class="icon-chevron-left"></i>
									<p>Back</p>
								</span>
							</div>
						</div>
					</div>
				</c:when>
				<c:otherwise>
					<div class="row">
						<div class="col-md-12">
							<h4>${ERROR}</h4>
						</div>
					</div>
				</c:otherwise>
			</c:choose>
		</div>
	</div>

	<!-- scripts -->
	<script src="assets/js/jquery-1.11.0.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/jquery-ui-1.10.2.custom.min.js"></script>
	<script src="assets/js/theme.js"></script>
	<script src="assets/datepicker/js/bootstrap-datepicker.js"></script>
	<script src="assets/js/floating-1.12.js"></script>
	<script src="assets/js/functions.js"></script>
	<jsp:include page="analytics.jsp"></jsp:include>
</body>
</html>